<template>
  <div class="app-container">
    <!--大用户表历史数据-->
    <el-row style="width: 100%;height: 90%;margin: 0;" :gutter="10">
      <!--基本信息-->
      <el-col :span="6" style="height: 100%;padding-left: 0;">
        <el-card>
          <div slot="header" class="clearfix">
            <span style="font-size: 20px;font-weight: bold;">设备信息</span>
          </div>
          <div style="width: 100%;height: 260px;margin: 0 auto 10px auto;">
            <img :src="dbImgUrl"
                 style="width: 100%;height: 100%;" alt=""/>
          </div>
          <div :style="getDescriptionStyle">
            <el-descriptions class="margin-top" title="" :column="2" size="small" border :labelStyle="labelStyle">
              <el-descriptions-item>
                <template slot="label">
                  设备名称
                </template>
                {{ terminalData.terminalName }}
              </el-descriptions-item>
              <el-descriptions-item>
                <template slot="label">
                  设备编号
                </template>
                {{ terminalData.terminalId }}
              </el-descriptions-item>
              <el-descriptions-item>
                <template slot="label">
                  表状态
                </template>
                <dict-tag :options="dict.type.used_status" :value="terminalData.terminalMark"/>
              </el-descriptions-item>
              <el-descriptions-item>
                <template slot="label">
                  表型号
                </template>
                <dict-tag :options="dict.type.module_type" :value="terminalData.typeId"/>
              </el-descriptions-item>
              <el-descriptions-item>
                <template slot="label">
                  表底数
                </template>
                {{ terminalData.baseReading }}
              </el-descriptions-item>
              <el-descriptions-item>
                <template slot="label">
                  厂家名称
                </template>
                <dict-tag :options="dict.type.terminal_supplier" :value="terminalData.supplierId"/>
              </el-descriptions-item>
              <el-descriptions-item>
                <template slot="label">
                  安装日期
                </template>
                {{ terminalData.installDate }}
              </el-descriptions-item>
              <el-descriptions-item>
                <template slot="label">
                  安装地址
                </template>
                {{ terminalData.installAddress }}
              </el-descriptions-item>
              <el-descriptions-item>
                <template slot="label">
                  IMEI
                </template>
                {{ terminalData.imei }}
              </el-descriptions-item>
              <el-descriptions-item>
                <template slot="label">
                  SIM卡号
                </template>
                {{ terminalData.simNum }}
              </el-descriptions-item>
              <el-descriptions-item>
                <template slot="label">
                  钢印/塑封号
                </template>
                {{ terminalData.plasticSealNo }}
              </el-descriptions-item>
              <el-descriptions-item>
                <template slot="label">
                  出厂编号
                </template>
                {{ terminalData.firstSupplierId }}
              </el-descriptions-item>
              <el-descriptions-item>
                <template slot="label">
                  是否带阀控
                </template>
                <dict-tag :options="dict.type.yes_no" :value="terminalData.valveControl"/>
              </el-descriptions-item>
              <el-descriptions-item>
                <template slot="label">
                  阀门地址
                </template>
                {{ terminalData.valveAddress }}
              </el-descriptions-item>
              <el-descriptions-item>
                <template slot="label">
                  出厂日期
                </template>
                {{ terminalData.manufactureDate }}
              </el-descriptions-item>
              <el-descriptions-item>
                <template slot="label">
                  口径
                </template>
                <dict-tag :options="dict.type.ldbd_pipe_caliber" :value="terminalData.caliber"/>
              </el-descriptions-item>
              <el-descriptions-item>
                <template slot="label">
                  采集频率
                </template>
                {{ terminalData.readingFrequency }} (分钟)
              </el-descriptions-item>
              <el-descriptions-item>
                <template slot="label">
                  上传频率
                </template>
                {{ terminalData.upFrequency }} (分钟)
              </el-descriptions-item>
              <el-descriptions-item>
                <template slot="label">
                  协议
                </template>
                {{ terminalData.protocolName }}
              </el-descriptions-item>
            </el-descriptions>
          </div>
        </el-card>
      </el-col>

      <el-col :span="18" style="background-color: white;padding: 10px 10px;" class="right_content">
        <el-tabs v-model="statisticTypeTab" type="card" @tab-click="handleTabClick">
          <el-tab-pane label="历史数据" name="1">
            <HistoryData ref="refHistoryData" v-if="statisticTypeTab==='1'"/>
          </el-tab-pane>
          <el-tab-pane label="用量统计" name="2">
            <DosageStatistics ref="refTerminalDosage" v-if="statisticTypeTab==='2'"/>
          </el-tab-pane>
<!--          <el-tab-pane label="瞬时压力" name="3">-->
<!--            <History ref="refTerminalHistory" v-if="statisticTypeTab==='3'"/>-->
<!--          </el-tab-pane>-->
        </el-tabs>

      </el-col>
    </el-row>
  </div>
</template>

<script>
import { getTerminalsDb } from "@/api/record/terminalsdb";
import HistoryData from "./components/historyData.vue";
import DosageStatistics from "./components/DosageStatistics.vue";


export default {
  name: "HistoryDb",
  components: { HistoryData, DosageStatistics },
  dicts: ['warnparamtype', 'terminal_supplier', 'used_status', 'warntargettype', 'belongDepartment', 'module_type', 'ldbd_pipe_caliber', 'yes_no', 'default_position'],
  data() {
    return {
      dbImgUrl: require("@/assets/images/db.png"),
      statisticTypeTab: '1',
      labelStyle: {width: '75px'},
      tId: null,
      locationNb: null,
      terminalData: {},
    };
  },
  created() {
    this.screenHeight = document.body.clientHeight
    this.locationNb = this.$route.params.locationNb
    this.tId = this.$route.params.tid
  },
  beforeCreate() {
    this.$route.meta.title = `数据详情`
  },
  beforeRouteEnter(to, from, next) {
    to.meta.title = `${to.params.terminalId}--数据详情`
    next()
  },
  computed: {
    getChartBoxStyle() {
      return { width: '100%', height: (this.screenHeight - 230) + 'px'}
    },
    getDescriptionStyle() {
      return {overflow: 'auto', height: (this.screenHeight - 465) + 'px'}
    },
  },
  mounted() {
    this.getTerminalsDbDetail()
    this.$nextTick(() => {
      this.doLoadTabPaneData(this.statisticTypeTab)
    })
  },
  methods: {
    // 获取大用户表详情
    getTerminalsDbDetail() {
      getTerminalsDb(this.tId).then((response) => {
        if (response.code === 200 && response.data) {
          this.terminalData = response.data
        }
      })
    },
    // 切换tab
    handleTabClick(tab){
      this.doLoadTabPaneData(tab._props.name)
    },
    doLoadTabPaneData(tabName) {
      this.$nextTick(() => {
        if (tabName === '1') {
          this.$refs.refHistoryData.updateLocationNb(this.locationNb)
          this.$refs.refHistoryData.getList()
        } else if (tabName === '2') {
          this.$refs.refTerminalDosage.updateLocationNb(this.locationNb)
          this.$refs.refTerminalDosage.getList()
        }  else {
          // this.$refs.refTerminalAlarm.updateTerminalId(this.currentTerminalId)
          // this.$refs.refTerminalAlarm.getList()
        }
      })
    },
  }
};
</script>
<style scoped lang="scss">
.form_col {
  width: 80%;

  ::v-deep .el-form {
    width: 100%;
  }

  ::v-deep .el-form-item {
    width: 20%;
  }
}

.form_query {
  width: 20%;
  text-align: right;
}

::v-deep .right_content{
  .el-tabs__header {
    margin: 0 0 0px;
  }
}
</style>
